<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX图片上传</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
​
<form id="photoForm" class="form-horizontal" >

    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">头像：</label>
        <div class="col-sm-10">
            {{--多图上传--}}
            <input type="file" name="img[]" multiple="multiple"    />
        </div>
    </div>
    <div class="form-group">
        <label for="intro" class="col-sm-2 control-label">图片预览</label>
        <div class="col-sm-4" id="imgshow">
            
        </div>
    </div>
    <div class="form-group">
        <label for="intro" class="col-sm-2 control-label">
            <input type="button" value="上传" onclick="doUpload()" />
        </label>
    </div>
    ​
</form>
    <script src="/js/jquery-3.1.0.min.js"></script>
​   <script>
        $.ajaxSetup({
            headers:{'X-CSRF-TOKEN':'{{csrf_token()}}'}
        });
        function doUpload(){
            var formData = new FormData($('#photoForm')[0]);
            $.ajax({
            url: "{{url('/image')}}",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (returndata) {
                    // console.log(returndata);
                    var ret=eval("("+returndata+")");
                    console.log(ret.data);
                    var row='';
                    for(var i in ret.data){
                        console.log(ret.data[i]['url']);
                        row+='<img src="'+ret.data[i]['url']+'" alt="" id="avatar_url" width="100";height="100">';
                    }
                    $("#imgshow").html(row);
                },
                error:function(returndata){

                }
            });
        }
    </script>

</body>
</html>